<template>
  <nav-bar title="实名认证" />
  <template v-if="authFlag === 0">
    <view class="list_box mt-19">
      <view class="list_item flex_a_c">
        <view class="list_txt">
          <font class="require">*</font>真实姓名
        </view>
        <input class="flex1 tr pr-0" v-model="form.vipName" placeholder-class='inputPlaceHolder' placeholder="请输入(必填)" />
      </view>
      <view class="list_item flex_a_c border_none">
        <view class="list_txt">
          <font class="require">*</font>身份证号
        </view>
        <input class="flex1 tr pr-0" type="idcard" v-model="form.idCardNo" placeholder-class='inputPlaceHolder' placeholder="请输入(必填)" />
      </view>
    </view>
    <view class="btns confirm" @click="onSubmit">提交</view>
    <view class="des flex_center"><image class="auth" src="https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/user_auth_icon.png"></image>认证信息已加密 仅用于匹配认证</view>
  </template>
  <view v-if="authFlag === 2" class="success flex_c flex_center">
    <image class="success_icon" src="https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/auth_success.png"></image>
    <view class="mb-50">实名认证已通过</view>
    <view v-if="isShowbtn" class="btns confirm" @click="onBack">确认</view>
  </view>
</template>
<script setup>
import { getUserAuth } from '@/api/user'
import { reactive, ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import storage from '@/utils/storage'
let isShowbtn = ref(false)
let form = reactive({
  vipName: "", 
  idCardNo: "" 
})
let authFlag = ref('')
onShow(() => {
  authFlag.value = storage.getStorage('info').authFlag
})
let onBack = () => {
  uni.navigateBack({
    dedelta: 1
  })
}
let onSubmit = async () => {
  if (!form.vipName) {
    uni.showToast({
      title: '请输入姓名',
      icon: 'none'
    })
    return false
  }
  if (!form.idCardNo) {
    uni.showToast({
      title: '请输入身份证号',
      icon: 'none'
    })
    return false
  }
  const { code, data } = await getUserAuth(form)
  if (code === 200) {
    authFlag.value = 2
    isShowbtn.value = true
    let info = storage.getStorage('info')
    storage.setStorage('info', { ...info, authFlag: 2})
  }
}
</script>
<style lang="scss" scoped>
.btns{
  width: 600rpx;
  margin: 59rpx auto 0;
}
.des {
  text-align: center;
  font-weight: 500;
  font-size: 26rpx;
  color: #66A9E9;
  line-height: 45rpx;
  margin-top: 27rpx;
  .auth {
    width: 30rpx;
    height: 30rpx;
    margin-right: 7rpx;
  }
}
.success {
  padding-top: 147rpx;
  font-size: 36rpx;
  color: #000000;
  line-height: 56rpx;
  .success_icon {
    width: 408rpx;
    height: 300rpx;
    margin-bottom: 60rpx;
  }
}
</style>
